import React, { useState, forwardRef, useImperativeHandle, useEffect, memo } from 'react';
import { Tooltip } from 'antd';
import ResumeTree from './components/resumeTree';
import ComponentDetail from './components/componentDetail';
import DataBaseConfig from './components/dataBaseConfig';
import MenuDrawerDetail from './components/drawerWrapper';
import DebounceWrapper from '@/components/DebounceWrapper';
import { ProfileOutlined, BuildOutlined, DatabaseOutlined } from '@ant-design/icons';
import styles from './index.less';
import drawerStyles from './components/drawerWrapper/index.less';

const menuList = [
  {
    key: 'resume',
    label: '大纲树',
    icon: ProfileOutlined,
    component: ResumeTree,
  },
  {
    key: 'componentList',
    label: '组件库',
    icon: BuildOutlined,
    component: ComponentDetail,
  },
  {
    key: 'dataBase',
    label: '数据源',
    icon: DatabaseOutlined,
    component: DataBaseConfig,
  },
];

// 菜单按钮渲染
const DebounceButton = DebounceWrapper(({ label, icon, active, onClick }) => (
  <Tooltip placement="right" title={label}>
    {React.createElement(icon, {
      onClick,
      className: `${styles.leftIcon} ${active ? styles.active : null}`,
    })}
  </Tooltip>
));

// 菜单详情容器
const DrawerContentWrapper = memo(
  ({ componentKey, activeKey, title, children }) => {
    const [visible, setVisible] = useState(activeKey === componentKey);

    useEffect(() => {
      if (activeKey) {
        setVisible(activeKey === componentKey);
      }
    }, [activeKey]);

    return (
      <div className={drawerStyles.drawerContent} style={{ display: visible ? 'block' : 'none' }}>
        <div className={drawerStyles.drawerContentHeader}>{title}</div>
        <div className={drawerStyles.drawerContentCube}>{children}</div>
      </div>
    );
  },
  (prevProps, nextProps) => prevProps.activeKey === nextProps.activeKey,
);

export default forwardRef((props, ref) => {
  const [activeKey, setActiveKey] = useState('');

  const closeDrawer = () => {
    setActiveKey('');
  };

  useImperativeHandle(ref, () => ({
    closeDrawer,
  }));

  return (
    <div className={styles.leftContainer} onClick={(e) => e.stopPropagation()}>
      {/* 菜单按钮组 */}
      <div className={styles.leftMenu}>
        {menuList.map(({ key, label, icon }) => (
          <DebounceButton
            key={key}
            icon={icon}
            label={label}
            active={activeKey === key}
            onClick={() => {
              setActiveKey((currentKey) => (currentKey === key ? '' : key));
            }}
          />
        ))}
      </div>
      {/* 菜单详情 */}
      <MenuDrawerDetail visible={!!activeKey} closeDrawer={closeDrawer}>
        {menuList.map(({ key, label, component }) => (
          <DrawerContentWrapper key={key} componentKey={key} title={label} activeKey={activeKey}>
            {React.createElement(component, { closeDrawer, visible: key === activeKey })}
          </DrawerContentWrapper>
        ))}
      </MenuDrawerDetail>
    </div>
  );
});
